import React from 'react';
import {SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar, Button} from 'react-native';
import {useTheme, Button as PaperButton} from "react-native-paper";
// import {AppContext} from '../../context/app_context'

const DATA = [
    {
        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
        title: 'First Item',
    },
    {
        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
        title: 'Second Item',
    },
    {
        id: '58694a0f-3da1-471f-bd96-145571e29d72',
        title: 'Third Item',
    },
];

const Item = ({title, backgroundColor}) => {
    return (
        <View style={[styles.item, backgroundColor]}>
            <Text style={styles.title}>{title}</Text>
        </View>
    );
}

const Home = ({route, navigation}) => {
    const {colors} = useTheme()
    const renderItem = ({item}) => (
        <Item title={item.title} backgroundColor={{backgroundColor: colors.primary}}/>
    );
    const [btSty, setColor] = React.useState({buttonColor: 'brown'})

    function changeColor() {
        setColor({buttonColor: 'blue'})
    }

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                data={DATA}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            />
            <PaperButton icon="camera" mode="contained" onPress={() => {
                navigation.navigate('User', {name: '张三', job: '打豆豆'})
            }} children={"点我跳转"} labelStyle={{fontWeight: '700'}}></PaperButton>
            <Text style={{margin: 10}}>Post: {route?.params?.post}</Text>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
        color: 'black'
    },
    item: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    },
    title: {
        fontSize: 32,
    },
});

export default Home;